import { Button, Modal, Popconfirm, Table, Form, Input, message } from 'antd'
import { ColumnsType } from 'antd/es/table'
import React, { useState } from 'react'

import { useColumsSearch } from '@/hooks/useColumsSearch'
import { mainrType } from '@/store/maintenancer'
import { storeAll } from '@/store'
import { deleteMaintenancerRequest, reviseMaintenancerRequest } from '@/apis/mainTenancer'
import { layout } from '@/utils/contants'
import { observer } from 'mobx-react-lite'

const Maintenancer: React.FC = () => {
	const [open, setOpen] = useState<boolean>(false);
	const [currentMain, setCurrentMain] = useState<mainrType>()
	const [form] = Form.useForm()
	const { mainTenancer: { maintenancers, getMaintenancers }, mainTenance: { getMaintenances } } = storeAll
	const columns: ColumnsType<mainrType> = [
		{
			dataIndex: 'username',
			title: '用户名'
		},
		{
			dataIndex: 'password',
			title: '密码'
		},
		{
			dataIndex: 'phone',
			title: '电话'
		},
		{
			dataIndex: 'name',
			title: '姓名',
			...useColumsSearch<mainrType>().getColumnSearchProps('name')
		},
		{
			title: '操作',
			dataIndex: 'action',
			render: (_, record) => {
				return <>
					<Button type="primary" danger>
						<Popconfirm
							title="Delete the task"
							description="你确定要删除此维修员吗"
							okText="确定"
							cancelText="取消"
							onConfirm={() => deleteMaintenancer(record.id)}
						>
							删除
						</Popconfirm>
					</Button>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	]

	const deleteMaintenancer = (id: number) => {
		deleteMaintenancerRequest(id).then((res: any) => {
			getMaintenancers()
			message.success(res.result)
		})
	}

	const opneModal = (record: mainrType) => {
		setOpen(true)
		setCurrentMain(record)
		form.setFieldsValue(record)
	}

	const onCancel = () => {
		setOpen(false)
		form.resetFields()
	}

	const onFinish = (value: any) => {
		value.id = (currentMain as mainrType).id
		reviseMaintenancerRequest(value).then((res: any) => {
			message.success(res.message)
			setOpen(false)
			getMaintenancers()
			getMaintenances()
		})
	}

	return <div className="maintenancerWrap">
		<Table dataSource={maintenancers} rowKey={(record) => record.id} columns={columns}>
		</Table>
		<Modal open={open} footer={null} onCancel={onCancel} title="修改维修员">
			<Form form={form} onFinish={onFinish} {...layout}>
				<Form.Item label="id" name="id" style={{ display: 'none' }}>
					<Input />
				</Form.Item>
				<Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
					<Input />
				</Form.Item>
				<Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
					<Input.Password />
				</Form.Item>
				<Form.Item label="联系电话" name="phone" rules={[{ required: true, message: '请输入电话号码' }]}>
					<Input />
				</Form.Item>
				<Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
					<Input />
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(Maintenancer)